{% extends "base.html" %}
<meta charset="UTF-8"> {% block title %}Angular TodoList{% endblock %} {% block page_content %}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="..\static\js\logic.js"></script>
<link rel="stylesheet" href="..\static\css\style.css">

<!-- 网站主表头 -->
<div class="siteHead">
    <h1>AngularJS TodoList</h1>
</div>
<!-- 顶部的搜索表单和按钮 -->
<div>
    <input type="text" class="searchInput" id="SearchInput" oninput="Search()" placeholder="Search for...">
    <button class="GoButton" onclick="Search()">Go!</button>
</div>

<!-- 表头文字提示-->
<div class="tableHeadLetter">
    <b>#</b>
    <b>Title</b>
    <b>Control</b>
</div>
<hr/>
<!-- 内容部分 -->
<div id="Content"></div>

<!-- 增加的表单和按钮 -->
<div>
    <input class="addInput" placeholder="type something here..." id="addRecord">
    <button class="addButton" onclick="addRecord()">Add new item</button>
</div>

<!-- 底部的计数部分 -->
<div class="bottomCount" id="BottomContent">
    <button id="allCount" disabled="disabled"></button>
    <button id="doneCount" disabled="disabled"></button>
    <button id="activeCount" disabled="disabled"></button>
</div>

{% endblock %}